<template>
  <!-- 库存组件 -->
  <div class="component-commonStock">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p v-show="flag == 0">
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>总部库存
          </p>
          <p v-show="flag == 1">
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>项目部库存
          </p>
          <p v-show="flag == 2">
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>施工队库存
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs-header">
        <el-tab-pane label="材料" name="first">
          <div class="component-searchHeader">
            <div class="search-header">
              <div class="left-title">
                <p class="left-text">
                  <span class="iconfont">&#xe63d;</span> 筛选查询
                </p>
                <div class="right">
                  <button @click="findRes">查询</button>
                </div>
              </div>
            </div>
          </div>
          <div class="component-search-box">
            <el-form :inline="true" :model="searchBox" class="demo-form-inline">
              <el-form-item label="输入搜索：">
                <el-input clearable v-model="searchBox.search" placeholder="材料名称"></el-input>
              </el-form-item>
              <el-form-item label="材料类型：">
                <el-select clearable v-model="searchBox.select" placeholder="全部">
                  <el-option label="自购" value="0"></el-option>
                  <el-option label="甲供" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="仓储位置：" v-show="flag == 1">
                <el-select clearable v-model="searchBox.location" placeholder="全部">
                  <el-option label="实际仓库" value="1"></el-option>
                  <el-option label="虚拟仓库" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="component-listHeader">
            <div class="search-header">
              <div class="left-title">
                <p v-show="flag == 0" class="left-text">
                  <span class="iconfont" style="margin-right:3px;">&#xe61e;</span>总部库存
                </p>
                <p v-show="flag == 1" class="left-text">
                  <span class="iconfont" style="margin-right:3px;">&#xe61e;</span>项目部库存
                </p>
                <p v-show="flag == 2" class="left-text">
                  <span class="iconfont" style="margin-right:3px;">&#xe61e;</span>施工队库存
                </p>
              </div>
            </div>
          </div>
          <div>
            <el-table
              ref="multipleTable"
              :data="info"
              tooltip-effect="dark"
              style="width: 1100px;margin:0 auto;"
              border
            >
              <el-table-column label="编号" align="center" width="100" type="index"></el-table-column>
              <el-table-column  v-if="flag == 1" label="项目部" align="center" width="100" prop="orgName"></el-table-column>
              <el-table-column  v-if="flag == 2" label="施工队" align="center" width="100" prop="orgName"></el-table-column>
              <el-table-column label="材料名称" align="center" prop="matName"></el-table-column>
              <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
              <el-table-column label="材料类型" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.provideParty == 0">自购</span>
                  <span v-else>甲供</span>
                </template>
              </el-table-column>
              <el-table-column label="单位" align="center" prop="matUnit"></el-table-column>
              <el-table-column label="单价" align="center" prop="price"></el-table-column>
              <el-table-column label="剩余数量" align="center" prop="number"></el-table-column>
              <el-table-column label="仓储位置" align="center" v-if="flag==1">
                <template slot-scope="scope">
                  <span v-if="scope.row.storeStatus == 0">虚拟</span>
                  <span v-else>实际</span>
                </template>
              </el-table-column>
              <el-table-column label="操作信息" align="center">
                <template slot-scope="scope">
                  <el-button
                    v-if="flag == 0"
                    @click="$router.push({name:'totalRecords',query:{info:scope.row.smId}})"
                    type="text"
                    size="small"
                    class="iconfont icondelete red"
                  >查看记录</el-button>
                  <el-button
                    v-if="flag == 1"
                    @click="$router.push({name:'proRecords',query:{info:scope.row.smId}})"
                    type="text"
                    size="small"
                    class="iconfont icondelete red"
                  >查看记录</el-button>
                  <el-button
                    v-if="flag == 2"
                    @click="$router.push({name:'teamRecords',query:{info:scope.row.smId}})"
                    type="text"
                    size="small"
                    class="iconfont icondelete red"
                  >查看记录</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="component-paging" v-if="info.length > 0">
            <div class="table-bottom" style="width: 100%;">
              <div class="bottom-left">
              </div>
              <div class="paging">
                <div class="paging-left">
                  <p>
                    共
                    <span>{{Math.ceil(total/pageSize)}}</span> 页/
                    <span>{{total}}</span> 条数据
                  </p>
                </div>
                <el-pagination
                  background
                  @size-change="SizeChanges"
                  @current-change="CurrentChanges"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30]"
                  :page-size="pageSize"
                  layout="sizes, prev, pager, next, jumper"
                  :total="total"
                ></el-pagination>
              </div>
            </div>
          </div>
          <div style="width: 100%;text-align: right;margin-top: 20px;">总计：{{totalMoney}} 元</div>
        </el-tab-pane>
        <el-tab-pane label="设备" name="second">
          <div class="component-searchHeader">
            <div class="search-header">
              <div class="left-title">
                <p class="left-text">
                  <span class="iconfont">&#xe63d;</span> 筛选查询
                </p>
                <div class="right">
                  <button @click="findRes">查询</button>
                </div>
              </div>
            </div>
          </div>
          <div class="component-search-box">
            <el-form :inline="true" :model="searchBox" class="demo-form-inline">
              <el-form-item label="输入搜索：">
                <el-input clearable v-model="searchBox.search" placeholder="材料名称"></el-input>
              </el-form-item>
              <el-form-item label="材料类型：">
                <el-select clearable v-model="searchBox.select" placeholder="全部">
                  <el-option label="自购" value="0"></el-option>
                  <el-option label="甲供" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="仓储位置：" v-show="flag == 1">
                <el-select clearable v-model="searchBox.location" placeholder="全部">
                  <el-option label="实际仓库" value="1"></el-option>
                  <el-option label="虚拟仓库" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="component-listHeader">
            <div class="search-header">
              <div class="left-title">
                <p v-show="flag == 0" class="left-text">
                  <span class="iconfont" style="margin-right:3px;">&#xe61e;</span>总部库存
                </p>
                <p v-show="flag == 1" class="left-text">
                  <span class="iconfont" style="margin-right:3px;">&#xe61e;</span>项目部库存
                </p>
                <p v-show="flag == 2" class="left-text">
                  <span class="iconfont" style="margin-right:3px;">&#xe61e;</span>施工队库存
                </p>
              </div>
            </div>
          </div>
          <div>
            <el-table
              ref="multipleTable"
              :data="info"
              tooltip-effect="dark"
              style="width: 1100px;margin:0 auto;"
              border
            >
              <el-table-column label="编号" align="center" width="100" type="index"></el-table-column>
              <el-table-column  v-if="flag == 1" label="项目部" align="center" width="100" prop="orgName"></el-table-column>
              <el-table-column  v-if="flag == 2" label="施工队" align="center" width="100" prop="orgName"></el-table-column>
              <el-table-column label="材料名称" align="center" prop="matName"></el-table-column>
              <el-table-column label="设备码" align="center" prop="deviceNum"></el-table-column>
              <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
              <el-table-column label="材料类型" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.provideParty == 0">自购</span>
                  <span v-else>甲供</span>
                </template>
              </el-table-column>
              <el-table-column label="单位" align="center" prop="matUnit"></el-table-column>
              <el-table-column label="单价" align="center" prop="price"></el-table-column>
              <el-table-column label="剩余数量" align="center" prop="number"></el-table-column>
              <el-table-column label="仓储位置" align="center" v-if="flag==1">
                <template slot-scope="scope">
                  <span v-if="scope.row.storeStatus == 0">虚拟</span>
                  <span v-else>实际</span>
                </template>
              </el-table-column>
              <el-table-column label="操作信息" align="center">
                <template slot-scope="scope">
                  <el-button
                    v-if="flag == 0"
                    @click="$router.push({name:'totalRecords',query:{index:scope.$index,info:scope.row.smId,deviceNum:scope.row.deviceNum}})"
                    type="text"
                    size="small"
                    class="iconfont icondelete red">查看记录</el-button>
                  <el-button
                  v-if="flag == 1"
                  @click="$router.push({name:'proRecords',query:{index:scope.$index,info:scope.row.smId,deviceNum:scope.row.deviceNum}})"
                  type="text"
                  size="small"
                  class="iconfont icondelete red">查看记录</el-button>
                  <el-button
                    v-if="flag == 2"
                    @click="$router.push({name:'teamRecords',query:{index:scope.$index,info:scope.row.smId,deviceNum:scope.row.deviceNum}})"
                    type="text"
                    size="small"
                    class="iconfont icondelete red">查看记录</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="component-paging" v-if="info.length > 0">
            <div class="table-bottom" style="width: 100%;">
              <div class="bottom-left">
              </div>
              <div class="paging">
                <div class="paging-left">
                  <p>
                    共
                    <span>{{Math.ceil(total/pageSize)}}</span> 页/
                    <span>{{total}}</span> 条数据
                  </p>
                </div>
                <el-pagination
                  background
                  @size-change="SizeChanges"
                  @current-change="CurrentChanges"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30]"
                  :page-size="pageSize"
                  layout="sizes, prev, pager, next, jumper"
                  :total="total"
                ></el-pagination>
              </div>
            </div>
          </div>
          <div style="width: 100%;text-align: right;margin-top: 20px;">总计：{{totalMoney}} 元</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "commonStock",
  props: ["flag"],
  data() {
    return {
      activeName: "first",
      searchBox: {
        search: "",
        select: "",
        location:''
      },
      info: [], //表格内容
      total: 1,// 数据总条数
      pageSize: 10,// 每页显示数据的条数
      currentPage: 1,// 当前显示的页面页码
      tabs:'first',
      totalMoney:'',//总计
    };
  },
  mounted(){
      // 1 -- 项目部库存  2 -- 施工队库存
    if(this.flag == 1){
      this.dataInit(this.currentPage,this.pageSize,0,1)
    }
    if(this.flag == 2){
      this.dataInit(this.currentPage,this.pageSize,0,2)
    }
  },
  methods: {
    dataInit(currentPage,pageSize,num,n){
      let that = this;
      that.searchBox = that.deepClone(that.searchBox)
      let suCb = function(res){
        that.info = res.data.data;
        that.total = res.data.rowCount;
        that.totalMoney = res.data.totalMoney;
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        matName:that.searchBox.search, //材料名称
        provideParty:that.searchBox.select,  //提供方(0-自购，1-甲供)
        storeStatus:that.searchBox.location, //仓库类型（0-虚拟，1-实际）
        storeType:n.toString(),//仓库类别（0-总公司仓库、1-项目部仓库，2-施工队仓库）
        pageSize:pageSize,
        pageCurrent:currentPage,
        mainType:num.toString() //材料主类（0-耗材，1-设备）
      }
      let palyParam = {
        url: "/api/web/proStoreMaterial/selectStoreMaterial",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      console.log(palyParam.data)
      that.$https(palyParam)
    },
    //标签页切换
    handleClick(tab, event) {
      this.currentPage = 1;// 当前显示的页面页码
      this.searchBox = {
        search: "",
        select: "",
        location:''
      };
      this.tabs = tab.name;
      // 1 -- 项目部库存  2 -- 施工队库存
      if(this.flag == 1){
        console.log(tab.name)
        if (tab.name == "second") {
          this.dataInit(this.currentPage,this.pageSize,1,1)
        } else {
          this.dataInit(this.currentPage,this.pageSize,0,1)
        }
      }
      if(this.flag == 2){
        if (tab.name == "second") {
          this.dataInit(this.currentPage,this.pageSize,1,2)
        } else {
          this.dataInit(this.currentPage,this.pageSize,0,2)
        }
      }
    },
    findRes(){
      this.currentPage = 1;// 当前显示的页面页码
      if(this.flag == 1){
        if (this.tabs == "second") {
          this.dataInit(this.currentPage,this.pageSize,1,1)
        } else {
          this.dataInit(this.currentPage,this.pageSize,0,1)
        }
      }
      if(this.flag == 2){
        if (this.tabs == "second") {
          this.dataInit(this.currentPage,this.pageSize,1,2)
        } else {
          this.dataInit(this.currentPage,this.pageSize,0,2)
        }
      }
    },
    SizeChanges(val){
      this.pageSize = val;
      if(this.flag == 1){  //项目部库存
        if (this.tabs == "second") {
          this.dataInit(this.currentPage,this.pageSize,1,1)
        } else {
          this.dataInit(this.currentPage,this.pageSize,0,1)
        }
      }
      if(this.flag == 2){ //施工队库存
        if (this.tabs == "second") {
          this.dataInit(this.currentPage,this.pageSize,1,2)
        } else {
          this.dataInit(this.currentPage,this.pageSize,0,2)
        }
      }
    },
    CurrentChanges(val){
      this.currentPage = val
      if(this.flag == 1){  //项目部库存
        if (this.tabs == "second") {
          this.dataInit(this.currentPage,this.pageSize,1,1)
        } else {
          this.dataInit(this.currentPage,this.pageSize,0,1)
        }
      }
      if(this.flag == 2){ //施工队库存
        if (this.tabs == "second") {
          this.dataInit(this.currentPage,this.pageSize,1,2)
        } else {
          this.dataInit(this.currentPage,this.pageSize,0,2)
        }
      }
    }
  },
};
</script>

<style scoped>
.tabs{
  width: 1100px;
  margin: 20px auto;
}
/* 搜索栏头部样式 */
.component-searchHeader .search-header {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-searchHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-searchHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-searchHeader .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-searchHeader .right button {
  padding: 0 15px;
  height: 30px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 12px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-searchHeader .right button:hover {
  background-color: #f3f3f3;
}

/* 搜索框主体 */
.component-search-box {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
  margin: 0 auto;
  text-align: left;
  padding-left: 30px;
  line-height: 60px;
}

.component-search-box .el-input__inner {
  height: 35px;
  display: inline-block;
}

/* 表头样式 */
.component-listHeader .search-header {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: none;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-listHeader .search-header .right button:hover {
  background-color: #f3f3f3;
}

.component-listHeader .search-header .right .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}

/* 删除按钮 */
.red {
  color: #48c9b0;
  font-size: 12px;
}
</style>
